<template>
  <div class="orderContent flex flex_column">
    <div class="tagList">
      <div class="fileTable">
        <div class="border lastTdNoBorder">
          <el-table
            :data="intelligenceList"
            border
            fit
            style="width: 100%"
          >
            <el-table-column
              prop="handInBillNo"
              label="缴库编号"
              min-width="150"
            />
            <el-table-column
              prop="handInTypeName"
              label="缴库类型"
              min-width="100"
            />
            <el-table-column
              prop="handInBillState"
              label="单据状态"
              min-width="100"
            >
              <template scope="{row}">
              <div class="flex">
                <template v-if="row.handInBillStateName=='待确认'">
                  <span class="mr5 spot" style="background: #3F61F1" />待确认
                </template>
                <template v-else-if="row.handInBillStateName=='已确认'">
                  <span class="mr5 spot" style="background: #67C23A" />已确认
                </template>
                <template v-else-if="row.handInBillStateName=='已完成'">
                  <span class="mr5 spot" style="background: #67C23A" />已完成
                </template>
                <template v-else-if="row.handInBillStateName=='已作废'">
                  <span class="mr5 spot" style="background: #999AAA" />已作废
                </template>
              </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="inStockState"
              label="入库状态"
              min-width="100"
            >
              <template scope="{row}">
              <div class="flex">
                <template v-if="row.inStockState===2">
                  <span class="mr5 spot" style="background: #999AAA" />待开始
                </template>
                <template v-else-if="row.inStockState===0">
                  <span class="mr5 spot" style="background: #3F61F1" />待入库
                </template>
                <template v-else-if="row.inStockState===1">
                  <span class="mr5 spot" style="background: #67C23A" />已入库
                </template>
                <template v-else>
                  <span class="mr5 spot" style="background: #999AAA" />
                </template>
              </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="createDate"
              label="缴库时间"
              min-width="200"
            />
            <el-table-column
              prop="saleOrderNo"
              label="关联订单"
              min-width="100"
            />
            <el-table-column
              prop="handInSumBoxs"
              label="箱数"
              min-width="100"
            />
            <el-table-column
              prop="handInSumQuantity"
              label="数量"
              min-width="100"
            />
            <el-table-column
              prop="productUnit"
              label="单位"
              min-width="100"
            />
            <el-table-column
              prop="sumExpressGoodsWeight"
              label="总重量"
              min-width="100"
            />
            <el-table-column
              prop="handInPersonName"
              label="缴库人员"
              min-width="100"
            />
            <el-table-column
              prop="handInRemark"
              label="备注"
              show-overflow-tooltip
              min-width="100"
            >
              <template scope="{row}">
                {{ row.handInRemark || '--' }}
              </template>
            </el-table-column>

            <el-table-column label="操作" min-width="70" fixed="right">
              <template slot-scope="scope">
                <div>
                  <el-popover
                    :ref="`popover-${scope.$index}`"
                    placement="bottom-end"
                    popper-class="tableOp"
                    width="160"
                    :popper-options="{ boundariesElement: 'opBox', removeOnDestroy: true }"
                    trigger="click"
                  >
                    <div class="operation">
                      <ul>
                        <li @click="handleClick(scope.row)">查看</li>
                      </ul>
                    </div>
                    <div slot="reference" class="opBox pointer"><span class="el-icon-more c_3F61F1" /></div>
                  </el-popover>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog
      :title="'查看'"
      :visible.sync="isAddProduct"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
      @close="closeDialog"
      @open="openCp"
    >
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"><span class="mr5">缴库单号：</span>{{ ProductForm.handInBillNo || '系统自动生成' }}</span>
          <span class="mr15"><span class="mr5">创建日期：</span>{{ ProductForm.createDate || dayjs().format('YYYY-MM-DD') }}</span>
          <span><span class="mr5">创建人员：</span>{{ ProductForm.createPersonName }}</span>
        </div>
        <div class="addWuliaoBox">
          <el-form
            ref="ProductForm"
            :model="ProductForm"
            :rules="rules"
            label-width="110px"
            label-position="left"
            class="dialogForm dialogInlineForm"
            :disabled="canDiable"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="缴库类型" prop="purchaseType">
                  <el-input v-model="ProductForm.handInTypeName" placeholder="缴库类型" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="关联单据">
                  <div class="flex flex_center">
                    <div class="flex1">
                      <el-input v-model="ProductForm.saleOrderNo" placeholder="关联单据" size="mini" disabled />
                    </div>
                    <div class="ml10 " />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="缴库人员" prop="handInPersonName	">
                  <div class="flex flex_center">
                    <div class="flex1">
                      <el-input v-model="ProductForm.handInPersonName	" size="mini" placeholder="请选择人员">
                        <el-button slot="append" icon="el-icon-user" @click="isperShow=true" />
                      </el-input>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="所属客户" prop="equipmentNo">
                  <div class="flex flex_center">
                    <div class="flex1">
                      <el-input v-model="ProductForm.customerName" placeholder="所属客户" size="mini" disabled />
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品名称" prop="productName">
                  <div v-if="packageGuiGeType === 1" class="flex flex_center">
                    <div class="flex1">
                      <el-input v-model="ProductForm.productName" placeholder="产品名称" size="mini" disabled />
                    </div>
                  </div>
                  <div v-if="packageGuiGeType === 2" class="flex flex_center">
                    <div class="flex1">
                      <el-input v-model="ProductForm.productName" placeholder="选择名称" size="mini" disabled />
                    </div>
                    <div class="ml10 ">
                      <el-button
                        type="primary"
                        size="mini"
                        icon="el-icon-search"
                        @click="addbcp"
                      >查找</el-button>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品单位" prop="productUnion">
                  <div class="flex flex_center">
                    <div class="flex1">
                      <el-input v-model="ProductForm.productUnit" placeholder="产品单位" size="mini" disabled />
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="缴库备注" class="inlineText">
              <el-input v-model="ProductForm.handInRemark" type="textarea" :rows="1" placeholder="缴库备注" size="mini" clearable />
            </el-form-item>
          </el-form>
          <div class="tableBox">
            <div class="tt flex flex_between">
              <span class="fw">成品明细</span>
              <span v-if="!canDiable" class="c_3F61F1 mr15 pointer" @click="isSemidialog = true"><i class="el-icon-plus mr5" /> 选择包装</span>
            </div>
            <div ref="bigdialogTable" class="bigdialogTbCon">
              <el-table
                :data="ProductForm.mxDataList"
                border
                style="width: 100%"
              >
                <el-table-column
                  prop="cartonSizeName"
                  label="纸箱规格"
                  width="120"
                />
                <el-table-column
                  label="包装描述"
                  prop="packageDescription"
                  show-overflow-tooltip
                  min-width="100"
                />
                <el-table-column
                  label="每箱数量"
                  prop="eachBoxQuantity"
                  show-overflow-tooltip
                  min-width="100"
                />
                <el-table-column
                  label="缴库箱数"
                  prop="handInBoxs"
                  show-overflow-tooltip
                  min-width="90"
                >         <template slot-scope="{row}">
                  <el-input
                    v-model="row.handInBoxs"
                    :disabled="canDiable"
                    placeholder="请输入"
                    size="mini"
                    onkeyup="value=value.replace(/[^\d]/g,'')"
                  />
                </template>
                </el-table-column>
                <el-table-column
                  label="实际数量"
                  prop="handInQuantity"
                  show-overflow-tooltip
                  min-width="90"
                >         <template slot-scope="{row}">
                  <el-input
                    v-model="row.handInQuantity"
                    :disabled="canDiable"
                    placeholder="请输入"
                    size="mini"
                    onkeyup="value=value.replace(/[^\d]/g,'')"
                  />
                </template>
                </el-table-column>
                <el-table-column
                  label="单位"
                  prop="productUnit"
                  min-width="80"
                />
                <el-table-column
                  label="公斤数"
                  prop="kilogramQuantity"
                  show-overflow-tooltip
                  min-width="90"
                >         <template slot-scope="{row}">
                  <el-input
                    v-model="row.kilogramQuantity"
                    :disabled="canDiable"
                    placeholder="请输入"
                    size="mini"
                    onkeyup="value=value.replace(/[^\d]/g,'')"
                  />
                </template>
                </el-table-column>
                <el-table-column
                  label="备注"
                  show-overflow-tooltip
                  min-width="150"
                  prop="handInMxRemark"
                >
                  <template slot-scope="{row}">
                    <el-input v-model="row.handInMxRemark" :disabled="canDiable" placeholder="请输入" size="mini" />
                  </template>
                </el-table-column>
                <el-table-column
                  v-if="!canDiable"
                  label="操作"
                  fixed="right"
                  show-overflow-tooltip
                  min-width="80"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="删除" placement="right-start">
                      <span class="pointer" @click="purchaseDelete(scope.$index)"><i class="el-icon-delete" /></span>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddProduct=false">取 消</el-button>
        <!-- 新增       -->
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { formatbytes } from '@/utils'

export default {
  name: '',
  props: {
    orderNo: {
      type: String
    }
  },
  data() {
    return {
      pickType: '1', //,
      intelligenceList: [],
      name: '',
      addProductLoading: false,
      isAddProduct: false,
      ops: 1,
      rules: {},
      opsid: 1,
      canDiable: false,
      ProductForm: {},
      equipmentList: [],
      saleOrderNo: null,
      packageGuiGeType: 1
    }
  },
  created() {
    this.saleOrderNo = this.$route.query.saleOrderNo
    this.getList()
  },
  mounted() {
  },
  methods: {
    handleClick(row) {
      this.canDiable = true
      this.getDetail(row)
    },
    openCp() {
      const _data = {
        produceTaskBillNo: this.ProductForm.produceTaskBillNo,
        likeWords: ''
      }
      this.$api.product.GetProduceTaskEquipmentList(_data).then((res) => {
        this.equipmentList = res
        if (res && res.length) {
          this.ProductForm.equipmentNo = res[0].equipmentNo
        }
      })
    },
    closeDialog() {
      if (this.$refs.ProductForm) {
        this.$refs.ProductForm.resetFields()
      }
      this.ProductForm = this.$options.data().ProductForm
    },
    getDetail(row) {
      const _data = {
        handInID: row.handInID,
        handInBillNo: row.handInBillNo
      }
      this.$api.product.GetProductHandInBillDetail(_data).then((res) => {
        // this.equipmentList.push({
        //   equipmentName: res.equipmentName,
        //   equipmentNo: res.equipmentNo
        // })
        this.ProductForm = res.baseData
        this.ProductForm.mxDataList = res.mxDataList
        this.isAddProduct = true
      })
    },
    getList() {
      const parmas = {
     saleOrderNo: this.saleOrderNo ? this.saleOrderNo : this.orderNo
      }
      this.$api.product.GetProductHandInBillsForOrder(parmas).then((res) => {
        this.intelligenceList = res
      }).catch(() => {

      })
    }
  }
}
</script>
<style lang="scss" scoped>
.orderContent {
  width: 100%;
  flex: 1;
}
.tagList {
  // box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
  // border: 1px solid #E6E6E6;
  margin-bottom: 16px;
  width: 100%;
  .type {
    margin: 16px 10px;
  }
  .listNav {
    height: 44px;
    padding: 0 14px;
    background: #f5f6f9;
    border-bottom: 1px solid #E6E6E6;
  }
  .fileTable{
    padding: 10px;
    .border{
      border: solid #EBEEF5;
      border-width: 0 1px 0 1px;
    }
  }
}

.container {
  height: 100%;
}
.permangeRg {
  border: 1px solid #e6e6e6;
  background: #fff;
  height: 100%;


  .mainTT {
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    padding: 18px 16px;
    padding-bottom: 0;
  }
}
.addWuliaoBox {
  padding: 10px 16px;

  .tableBox {
    margin-top: 16px;
    border: 1px solid #e6e6e6;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    overflow: hidden;

    .tt {
      height: 38px;
      line-height: 38px;
      padding-left: 16px;
      background: #f7f8fa;
      border-radius: 8px 8px 0 0;
    }
  }
}

.subTip {
  border-bottom: 1px #e6e6e6 solid;
  background: #f5f6f9;
  padding: 8px 16px;
}
</style>
